/*
 * @Author: thl
 * @Date: 2022-11-02 14:19:40
 * @FilePath: \cw_web\gl\src\containers\AppHeader.jsx
 * @Descripttion: 
 */
import React from 'react'
import PropTypes from 'prop-types'
import { getDate } from '../utils/getDate'
import { Menu, Dropdown, Layout, Avatar, Divider } from 'antd'
import TheDialog from "@/components/TheDialog";
// import {  LoginOutlined } from '@ant-design/icons';
import { withRouter } from "react-router-dom";
import EditPassWord from "./editPassWord";

const { Header } = Layout
class AppHeader extends React.Component {
    state = {
        time: getDate(),
        menuName: sessionStorage.getItem('menuName') || '',
        userName: '',
        roleName: sessionStorage.getItem('roleName') || '',
        dialogStatus: false
    }

    loginOut = () => {
        sessionStorage.clear();
        //数据看板  缓存用户筛选的动作
        let obj = {}
        let arr = ["dataBoard", "dataBoardNowData"]
        arr.map(name => {
            obj[name] = localStorage.getItem(name);
        })
        // localStorage.clear();
        localStorage.removeItem('RSnetToken');
        localStorage.removeItem('roleName');
        ["dataBoard", "dataBoardNowData"].map(name => {
            localStorage.setItem(name, obj[name]);
        })
        window.location.reload()
    }
    componentDidMount() {
        if (this.props.user) {
            this.setState({
                userName: this.props.user.userName
            })
        }
    }
    componentDidUpdate(preProps, preState) {
        if (this.props.location.pathname !== preProps.location.pathname) {
            this.setState({
                menuName: sessionStorage.getItem('menuName') || ''
            })
        }
    }
    editUserPassWord = () => {
        this.setState({
            dialogStatus: true
        })
    }
    updatePassWordSuccess = () => {

        this.setState({
            dialogStatus: false
        }, () => {
            this.loginOut()
        })
    }
    dialogClose = () => {

        this.setState({
            dialogStatus: false
        })
    }
    render() {
        let { avatar } = this.props
        let { userName, roleName, dialogStatus } = this.state
        return (
            <Header className='header'>
                {/* <div className='left'
                        onClick={menuClick}>
                    { !menuToggle ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />  }
                </div>*/}
                <div style={{ width: 200, marginLeft: 10 }}>{this.state.menuName}</div>

                <div style={{ width: '100%' }}>
                    <div className='mr15'>
                        <a rel='noopener noreferrer' href='https://github.com/ltadpoles/react-admin' target='_blank'>
                        </a>
                    </div>
                    <div className='fr'>
                        <Dropdown overlay={
                            <Menu>
                                <Menu.Item onClick={this.loginOut}>
                                    <div style={{ 'textAlign': 'center' }}>
                                        退出登录
                                    </div>
                                </Menu.Item>
                                <Menu.Divider></Menu.Divider>
                                <Menu.Item onClick={this.editUserPassWord}>
                                    <div style={{ 'textAlign': 'center' }}> 修改密码  </div>
                                </Menu.Item>
                                <Menu.Divider></Menu.Divider>
                                <Menu.Item disabled>
                                    <div style={{ 'textAlign': 'center' }}>

                                        {roleName}
                                    </div>

                                </Menu.Item>
                            </Menu>
                        } overlayStyle={{ width: '20rem' }}>
                            <div className='ant-dropdown-link'>
                                <span className='ant-dropdown-name'>{userName}</span>
                                <Avatar src={avatar} alt='avatar' style={{ cursor: 'pointer' }} />
                            </div>
                        </Dropdown>
                    </div>
                </div>
                <TheDialog
                    visible={dialogStatus}
                    title="修改密码"
                    handleCancel={this.dialogClose}
                    footer={null}
                >
                    <EditPassWord handleCancel={this.dialogClose} updateSuccess={this.updatePassWordSuccess} />
                </TheDialog>
            </Header >
        )
    }
}

AppHeader.propTypes = {
    menuClick: PropTypes.func,
    avatar: PropTypes.string,
    menuToggle: PropTypes.bool,
    loginOut: PropTypes.func,
    userName: PropTypes.string
}

export default withRouter(AppHeader)
